<%= stylesheet_link_tag 'recommend/_index' %>

<script type="text/javascript" charset="utf-8">
    bind_method(document, "keydown", goRoot);

    $(function () {
        $('.scroll-list').css('left', 0);
        var main = root.getWidgetById("main");
        main.focus();

        // 左37 上38 右39 下40
        main.on("keydown", function (e) {
            e = e || window.event;
            var keyValue = e.which || e.keyCode;
            var data = e.target.con.dataset
            switch (keyValue) {
                case 13:
                    Cookies.set('prev', "<%= recommend_path %>")
                    Cookies.set("<%= recommend_path %>", "?item_id=" + data.item_id)
                    window.location.href = data.href;
                    break;
            }
        });

        main.on("focus", function (e) {
            $(e.target.con).find(".marquee-truncate").marquee().trigger('forward').off('forward')
        });

        main.on("blur", function (e) {
            $(e.target.con).find(".marquee-truncate").trigger('reset').off('reset')
        });
    });
</script>

<div id="main" fe-role="Switch">
  <div
    class="recommend-scroll-h"
    fe-role="Scroll"
    fe-cfg="default:focus,scroll_dir:h,scroll_duration:0.3,scroll_easing:ease-out"
  >
    <div class="scroll-list" style="left: 0px; width: <%= 270*(@column_size+1) +100%>px;">

      <!--      大横图-->
      <div
        data-href="<%= entity_href(@top4[0]) %>"
        data-item_id="<%= @top4[0].id %>"
        class="recommend-tab big-horizontal"
        fe-role="Widget"
        fe-cfg="<%= "default_focus:yes" if @top4[0].id === params[:item_id].to_i %>"
      >
        <div class="recommend-tab-photo"
        >
          <div class="photo-mask"></div>
          <%= image_tag("icons/播放_play.png", class: "play-icon") %>
          <%= image_tag(entity_image_url(@top4[0], true), class: "recommend-tab-photo-img", onerror: "this.onerror=null;this.src='/singer_default.jpg';") %>
        </div>
<!--        <div class="recommend-tab-free-zone">热门推荐</div>-->
<!--        <div class="recommend-tab-listen">随便听听</div>-->
      </div>

      <!--      大竖图-->
      <div
        data-href="<%= entity_href(@top4[1]) %>"
        data-item_id="<%= @top4[1].id %>"
        class="recommend-tab big-vertical"
        fe-role="Widget"
        fe-cfg="<%= "default_focus:yes" if @top4[1].id === params[:item_id].to_i %>"
      >
        <div class="recommend-tab-photo">
          <div class="photo-mask"></div>
          <%= image_tag("icons/播放_play.png", class: "play-icon") %>
          <%= image_tag(entity_image_url(@top4[1], true), class: "recommend-tab-photo-img", onerror: "this.onerror=null;this.src='/singer_default.jpg';") %>
        </div>
        <div class="recommend-tab-inner">
          <div class="text-mask"></div>
          <div class="marquee-truncate overflow-hidden">
            <span class="marquee-content">
              <%#= @top4[1].entity.name %>
            </span>
          </div>
        </div>
      </div>

      <!--      横图下的两个跟图-->
      <%= render "recommend_item", item: @top4[2], top: 270, left: 0 %>
      <%= render "recommend_item", item: @top4[3], top: 270, left: 270 %>

      <!--      剩下用erb遍历, 分两组, 成两排 -->
      <% @rest_rows.each_with_index do |row, row_index| %>
        <% row.each_with_index do |item, item_index| %>
          <%= render "recommend_item", item: item, top: row_index == 0 ? 0 : 270, left: 810 + 270 * item_index %>
        <% end %>
      <% end %>

    </div>
  </div>
</div>
